<template>
    <div>
        <div>
            投诉内容：<el-input
                v-model="search.content"
                placeholder="请输入内容"
            ></el-input>
            投诉时间：<el-input
                v-model="search.date"
                placeholder="请输入内容"
            ></el-input>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="
                    getComplaints({
                        currentPage,
                        pageSize,
                        content: search.content,
                        state: search.state,
                        date: search.date,
                    })
                "
                >搜索</el-button
            ><br />
            处理状态：<el-select v-model="search.state" placeholder="请选择">
                <el-option value="全部" label="全部">全部</el-option>
                <el-option value="未处理" label="未处理">未处理</el-option>
                <el-option value="已处理" label="已处理">已处理</el-option>
            </el-select>
        </div>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
        >
            <el-table-column prop="_id" label="序号"> </el-table-column>
            <el-table-column prop="date" label="投诉日期"> </el-table-column>
            <el-table-column prop="name.username" label="投诉用户">
            </el-table-column>
            <el-table-column prop="cplTarget.username" label="被投诉对象">
            </el-table-column>

            <el-table-column label="投诉状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state" style="color: green">
                        已处理
                    </span>
                    <span v-else style="color: red"> 未处理 </span>
                </template>
            </el-table-column>

            <el-table-column prop="content" label="投诉内容"> </el-table-column>
            <el-table-column prop="results" label="处理结果"> </el-table-column>
            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.state" style="color: green"> </span>
                    <span v-else style="color: red">
                        <el-button
                            type="warning"
                            @click="
                                $router.push(
                                    '/adminsSystem/adminsCompaints/' +
                                        scope.row._id
                                )
                            "
                            >处理诉讼</el-button
                        >
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "complaints"
);
export default {
    created() {
        this.getComplaints({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            content: this.search.content,
            state: this.search.state,
            date: this.search.date,
        });
    },

    computed: {
        ...mapState([
            "currentPage",
            "tableData",
            "total",
            "pageSize",
            "search",
        ]),
    },
    methods: {
        ...mapMutations(["changePageSize", "changecurrentPage"]),
        ...mapActions(["getComplaints"]),
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changecurrentPage(val);
        },
    },
    data() {
        return {
            search: {
                content: "",
                date: "",
                state: "全部",
            },
        };
    },
    watch: {
        pageSize() {
            this.getComplaints({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                content: this.search.content,
                state: this.search.state,
                date: this.search.date,
            });
        },
        currentPage() {
            this.getComplaints({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                content: this.search.content,
                state: this.search.state,
                date: this.search.date,
            });
        },
    },
};
</script>

<style lang='scss'>
.el-input {
    width: 200px;
    margin: 5px;
}
</style>